<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/>
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/>
    <style type="text/css">
        body, html, #map{
            width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";
        }
    </style>
    <title>智慧城市管理平台</title>
    <!--引用百度地图API-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=CPU4Mlqd3YLbdW0fOiHtU5Lgzw46iBpo"></script>
</head>

<body>
<!--百度地图容器-->
<div id="map"></div>

</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }

    function createMap() {
        map.centerAndZoom(new BMap.Point(117.039275, 36.658614), 16);
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    function addClickHandler(target, window) {
        target.addEventListener("click", function () {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlay() {
        var pt = new BMap.Point(117.039275, 36.658614);
        var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
        var marker = new BMap.Marker(pt, {icon:myIcon});
        map.addOverlay(marker);
    }

    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true});
        map.addControl(overviewControl);
    }

    var map = new BMap.Map("map");
    var size = new BMap.Size(250, 20);
    map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    offset: size,
    // 切换城市之间事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
    }));
    initMap();
</script>
</html>